<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="../course/js/coursemgtservice.js"></script>
		<script type="text/javascript" src="../course/js/coursemgtcontroller.js"></script>
        <script type="text/javascript" src="../course/js/coursecreationcontroller.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				initEventListeners();
                initEditor();
                $("#step1").load("../course/courseoffering_overview.html");
                $("#step2").load("../course/courseoffering_structure.html");
                $('#wizard').wizard();
			});
			function initEditor() {
				tinyMCE.init({
					mode : "textareas",
					theme : "advanced"
				});
			}

			function initEventListeners() {
				$('#btnCreateOffering').bind('click', function() {
					CourseMgtController.addCourseOffering();
				});
			}
		</script>
	</head>
	<body>

        
    <div id="wizard" class="wizard">
        <ul class="steps">
            <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1 - Overview<span class="chevron"></span></li>
            <li data-target="#step2"><span class="badge">2</span>Step 2 - Structure<span class="chevron"></span></li>
        </ul>
        <div class="actions">
            <button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
            <button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
        </div>
    </div>
    <div class="step-content">
        <div class="step-pane active" id="step1"></div>
        <div class="step-pane" id="step2"></div>
    </div>
        
        
        
	</body>
</html>
